import React from 'react';
import UploadOss from '@/components/UploadOss';
import { primaryColor } from '@/defaultSettings';
import { Icon } from 'antd';
import fileImg from '@/pages/RecruitEmail/images/file.png';
import add from './icon-add.png';
import styles from './index.less';

const FileUpload = React.forwardRef(
    (
        {
            value = {},
            onChange,
            categoryCode = 'workflowFile',
            checkFileSize = 100,
            checkFileSizeMsg = '文件大小不能超过100MB！',
            checkFileType = 'JPG,JPEG,BMP,GIF,PNG,DOC,DOCX,ppt,pptx,PDF,xls,xlsx,RAR,ZIP,txt,ai',
            checkFileTypeMsg = '只能上传JPG,JPEG,BMP,GIF,PNG,DOC,DOCX,ppt,pptx,PDF,xls,xlsx,RAR,ZIP,txt,ai格式的文件！',
            customUploadList,
            ...rest
        },
        ref
    ) => {
        const { allFileList = [] } = value;

        const changeAllFileList = (showFileList, uploadResource) => {
            onChange({
                allFileList: showFileList,
                uploadResourceFile: uploadResource
            });
        };

        // 删除文件
        const handleRemove = file => {
            const keyName = file.keyName || file?.response?.data?.[0]?.keyName;
            const { uploadResource } = value;
            const uploadResourceResult = uploadResource || {
                categoryCode,
                keyNameAndOpt: []
            };

            const { keyNameAndOpt } = uploadResourceResult;
            const existIndex = keyNameAndOpt.findIndex(item => item === `ADD:${keyName}`);
            if (existIndex > -1) {
                // 删除新增
                keyNameAndOpt.splice(existIndex, 1);
            } else {
                // 删除已有
                keyNameAndOpt.push(`DELETE:${keyName}`);
            }
            onChange({
                allFileList: allFileList.filter(
                    item => item.keyName !== keyName && item?.response?.data?.[0]?.keyName !== keyName
                ),
                uploadResourceFile: uploadResourceResult
            });
        };

        const uploadButton = (
            <div
                style={{
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    padding: '8px 0',
                    color: primaryColor,
                    fontSize: 16
                }}
            >
                <img alt="" src={add} width="20" height="20" style={{ marginRight: 4 }} />
                添加
            </div>
        );

        return (
            <div className={styles.customUpload}>
                {allFileList?.length > 0 &&
                    ((customUploadList && customUploadList(allFileList, handleRemove)) ||
                        allFileList.map(item => (
                            <div
                                className={styles.uploadItem}
                                key={item.keyName || item?.response?.data?.[0]?.keyName || item.uid}
                            >
                                <div className={styles.detailName}>
                                    <img src={fileImg} alt="" className={styles.file} />
                                    <div className={styles.fileTitle}>
                                        <a target="_blank" rel="noopener noreferrer" title={item.name} href={item.url}>
                                            {item?.name.split('.')[0]}
                                        </a>
                                    </div>
                                    <span className={styles.fileType}>.{item?.name.split('.')[1]}</span>
                                </div>
                                <Icon
                                    type="close-circle"
                                    theme="filled"
                                    style={{ flexShrink: 0, marginLeft: 8, fontSize: 16, color: '#858B9B' }}
                                    onClick={() => handleRemove(item)}
                                />
                            </div>
                        )))}
                <UploadOss
                    dragAble={false}
                    ref={ref}
                    listType="picture"
                    uploadUrl="/api/resource/public/oss/producePutPreSignUrls"
                    checkFileSize={checkFileSize}
                    checkFileType={checkFileType}
                    sysCode="OA"
                    businessCode="SysRule"
                    categoryCode={categoryCode}
                    fileList={allFileList || []}
                    uploadResource={value && value.uploadResourceFile}
                    setFileList={changeAllFileList}
                    checkFileTypeMsg={checkFileTypeMsg}
                    checkFileSizeMsg={checkFileSizeMsg}
                    showUploadList={{ showPreviewIcon: false, showRemoveIcon: true, showDownloadIcon: false }}
                    {...rest}
                >
                    {rest.children || uploadButton}
                </UploadOss>
            </div>
        );
    }
);

export default FileUpload;
